<template>
  <!--发现组件-->
  <div id="explore" style="width: 100%;height:28rem">
  </div>
</template>
<script>
  import echarts from "echarts/lib/echarts"
  import line from "echarts/lib/chart/line"
  import * as report from '../../api/report'
  export default {
    data(){
      return{
        style:{
          width:'100%',
          height:document.documentElement.clientHeight
        },
      }
    },
    mounted:function () {
      var myChart = echarts.init(document.getElementById('explore'));
      report.reportData((response)=>{
        var op = this.createOption([{fieldName: 'a1', textName: '进口液位'}],response);
        myChart.setOption(op)
      })
    },
    methods:{
       createOption :function(fieldGroup,reportData) {
         var startTime, endTime;
         debugger
        //fieldGroup是包含了{fieldName, textName}对象的数据
        var params={};
        if(startTime&&endTime){params={startTime:startTime,endTime:endTime}}
        if (reportData) {
          var textNames = [], seriesData = [];
          for (var i = 0; i < fieldGroup.length; i++) {
            var id=fieldGroup[i].fieldName;
            textNames.push(fieldGroup[i].textName);
            seriesData.push({
              name: fieldGroup[i].textName,
              type: 'line',
              data: function () {
                var list = [];
                for (var j = 0; j < reportData.length; j++) {
                  list.push((reportData[j][id]));
                }
                return list;
              }()
            });
          }
          return {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: textNames
            },
            toolbox: {
              show: true,
              feature: {
                mark: {show: true},
                dataZoom: {show: true},
                dataView: {show: true,
                  optionToContent: function (opt) {
                    var divBtn='<input style="display: block;margin-left: 20px;margin-bottom: 4px;" type="button" value="导出为excel" onclick="toExcel()"/>';
                    var axisData = opt.xAxis[0].data; //坐标数据
                    var series = opt.series; //折线图数据
                    var tdHeads = '<thead class="fixedThead"><th  style="width: 120px;">时间</th>'; //表头
                    var tdBodys = ''; //数据
                    series.forEach(function (item) {
                      //组装表头
                      tdHeads += '<th style="width: 120px">'+item.name+'</th>';
                    });
                    tdHeads+='</thead>';
                    var table = '<table id="tableToEXCEL" border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center">'+tdHeads+'<tbody class="scrollTbody">';
                    for (var i = 0, l = axisData.length; i < l; i++) {
                      for (var j = 0; j < series.length; j++) {
                        //组装表数据
                        tdBodys += '<td style="width: 120px">'+series[j].data[i]+'</td>';
                      }
                      table += '<tr><td style="width: 120px">'+axisData[i]+'</td>'+tdBodys+'</tr>';
                      tdBodys = '';
                    }
                    table += '</tbody></table>';
                    return divBtn+table;
                  }
                },
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            calculable: true,
            dataZoom: {
              show: true,
              realtime: true,
              start: 80,
              end: 100
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: function () {
                  var list = [];
                  for (var i = 0; i < reportData.length; i++) {
                    list.push(reportData[i].time);
                  }
                  return list;
                }()
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: seriesData
          };
        } else {
          return "";
        }
      }
    }
  }
</script>
<style>
    @import "../../assets/css/explore.css";
</style>
